import React, { Component } from 'react';
import {Image,StyleSheet,Text,View,Alert,TouchableOpacity} from 'react-native';
import { StackNavigator,createStackNavigator ,TabNavigator,createBottomTabNavigator} from 'react-navigation';
import {HomeScreen} from "./components/HomeScreen";
import {Register} from './components/register';
// import {Test} from "./components/test";
import {ToBuy} from './components/page/toBuy';
import {Buy} from './components/page/buy';
import {Release} from './components/page/release';
import {Information} from './components/page/information';
import {AddTab} from './components/common/add';

export const TabNavigat=createBottomTabNavigator({//创建tab按钮
    page1:{
        screen:HomeScreen,
        navigationOptions:{
            tabBarVisible:true,
            tabBarLabel: '出售',
            tabBarIcon: ({tintColor,focused}) =>(
                focused
                ?
                <Image
                source={require('./assets/img/tab1-active.png')}
                resizeMode='contain'
                style={[styles.icon,{tintColor: tintColor}]}
                />
                :
                <Image 
                source={require('./assets/img/tab1.png')}
                resizeMode='contain'
                style={[styles.icon,{tintColor: tintColor}]}
                />
            )
        },
    },
    page2:{
        screen:ToBuy,
        navigationOptions:{
            tabBarVisible:false,
            tabBarLabel: '求购',
            tabBarIcon: ({tintColor,focused}) =>(
                focused
                ?
                <Image
                source={require('./assets/img/tab2-active.png')}
                resizeMode='contain'
                style={[styles.icon,{tintColor: tintColor}]}
                />
                :
                <Image 
                source={require('./assets/img/tab2.png')}
                resizeMode='contain'
                style={[styles.icon,{tintColor: tintColor}]}
                />
            )
        }
    },
    page3:{
        screen:Release,
        navigationOptions:()=>({
            tabBarLabel:'发布',
            tabBarIcon:<AddTab/>,
        }),
        // navigationOptions:{
        //     tabBarLabel: '发布',
        //     tabBarIcon:<AddTab/>
            // tabBarIcon: ({tintColor,focused})=>(
            //     focused
            //     ?
            //     <Text style={{transform: [{rotateX:'25deg'}],borderRadius:10,width:50,backgroundColor:'#43a2d8',textAlign:'center',color:'#fff',fontWeight:'bold',fontSize:20}}>
            //         +
            //     </Text>
            //     :
            //     <Text style={{borderRadius:10,width:50,backgroundColor:'#43a2d8',textAlign:'center',color:'#fff',fontWeight:'bold',fontSize:20}}>
            //         +
            //     </Text>
            // )
        // }
    },
    page4:{
        screen:Information,
        navigationOptions:{
            tabBarLabel: '资讯',
            tabBarIcon: ({tintColor,focused}) =>(
                focused
                ?
                <Image
                source={require('./assets/img/tab4-active.png')}
                resizeMode='contain'
                style={[styles.icon,{tintColor: tintColor}]}
                />
                :
                <Image 
                source={require('./assets/img/tab4.png')}
                resizeMode='contain'
                style={[styles.icon,{tintColor: tintColor}]}
                />
            )
        }
    },
    page5:{
        screen:ToBuy,
        navigationOptions:{
            tabBarLabel: '我的',
            tabBarIcon: ({tintColor,focused}) =>(
                focused
                ?
                <Image
                source={require('./assets/img/tab5-active.png')}
                resizeMode='contain'
                style={[styles.icon,{tintColor: tintColor}]}
                />
                :
                <Image 
                source={require('./assets/img/tab5.png')}
                resizeMode='contain'
                style={[styles.icon,{tintColor: tintColor}]}
                />
            ),
        }
    }
},{
    tabBarPosition: 'bottom',  
    lazy: true, // 是否懒加载  
    swipeEnabled:true,
    // backBehavior:'initialRoute',
    // initialRouteName: 'Hotshow',  
    tabBarOptions: {  
        showIcon: true,  
        pressOpacity: 0.8,
        inactiveTintColor:'#333',  
        activeTintColor:'#43a2d8',

        style: {  
            height: 60,  
            backgroundColor: '#fff',  
            zIndex: 0,  
            position: 'relative', 
            // overflow: 'auto',
        },  
        labelStyle: {  
            fontSize: 12,  
            paddingVertical: 3,  
            marginTop: 0  
        },  
        iconStyle: {  
            marginTop: 3,
        },  
        tabStyle: {  
            backgroundColor: '#fff',
        }, 
    } 
})

const styles = StyleSheet.create({  
    icon: {  
        width: 26,  
        height: 26, 
    },
    round:{
        borderRadius:5,
        height:30,
        width:30,
        backgroundColor:'#43a2d8',
        color:'#fff',
    },
    tabItem:{
        height:80,
        width:100,
        alignItems:'center',
        justifyContent:'center'
    },  
});  

export const RootStack=createStackNavigator(//创建导航
    {
        Home:{
            
            screen:TabNavigat,
            headerMode: 'none',
            navigationOptions:{
                headerTitle:'首页',
                headerMode: 'none',
                header:null
                // headerBackTitle:null,
            }
        },
        Regist:{
            screen:Register,
            navigationOptions:{
                // headerLeft:<View>
                //     <TouchableOpacity>
                //
                //     </TouchableOpacity>
                // </View>,
            }
        },
        TobuyView:{
            screen:ToBuy,
            headerMode: 'none',
            navigationOptions:{
                header:null
            }
        },
        buyView:{
            screen:Buy,
            headerMode: 'none',
            navigationOptions:{
                header:null
            }
        }

    },
    {
        initialRouteName: 'Home',
        // headerMode: ,
        navigationOptions: {
            gestureResponseDistance:{horizontal:300},
            cardStack: {
                gesturesEnabled: true,
                
            }
        }
    }
)